<template>
    <div class="SelectAccount">
        <el-input v-model="account" :placeholder="placeholder" readonly @click="showDialog = true" clearable @clear="clear"></el-input>
        <p-el-dialog v-model="showDialog" title="选择用户账号" width="95%" :height="bodySize.height - 150" @close="showDialog = false" @confirm="confirm">
            <account-list :sub-height="200" :sub-auth-tree="150" @data-list="getDataList" :select="true" @change="change" @dblclick="dblClick"></account-list>
        </p-el-dialog>
    </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, watch } from "vue";
import { useStore } from "vuex";
import PElDialog from "@/components/PElDialog.vue";
import AccountList from "@/components/account/AccountList.vue";
import utils from "@/lib/utils";
import http from "@/lib/http/http";
/**
 * state 数据类型
 */
interface IState {
    /**
     * 数据列表
     */
    dataList: any[];
    /**
     * 是否显示 添加编辑窗口
     */
    showDialog: boolean;
    /**
     * 账号
     */
    account: string;
    /**
     * 选择的账号
     */
    tableRow: any;
}
export default defineComponent({
    name: "SelectAccount",
    components: { AccountList, PElDialog },
    props: {
        // 提示文本
        placeholder: {
            type: String,
            default: "请选择用户账号",
        },
        // 绑定值
        modelValue: {
            type: String,
            default: "",
        },
    },
    emits: ["change", "update:modelValue"],
    setup(props, { emit }) {
        const store = useStore();
        const { UIAuth, bodySize } = toRefs(store.state);
        const state = reactive<IState>({
            dataList: [],
            showDialog: false,
            account: "",
            tableRow: null,
        });
        /**
         * 回显
         */
        const getAccount = (id: string) => {
            if (state.tableRow == null) {
                if (utils.empty(state.dataList)) {
                    // 用户管理—查询用户
                    http.Get(`/users/${id}`)
                        .then((data: any) => {
                            state.tableRow = data.account;
                            state.account = data.account.account;
                        })
                        .catch((err: any) => false);
                } else {
                    for (const item of state.dataList) {
                        if (item.id === id) {
                            state.account = item.account;
                            state.tableRow = item;
                            break;
                        }
                    }
                }
            }
        };
        /**
         * 返回绑定值
         */
        const confirm = () => {
            state.showDialog = false;
            if (state.tableRow == null) {
                state.account = "";
                emit("update:modelValue", "");
            } else {
                state.account = state.tableRow.account;
                emit("update:modelValue", state.tableRow.id);
            }
            emit("change", state.tableRow);
        };
        /**
         * 清空
         */
        const clear = () => {
            state.tableRow = null;
            confirm();
        };
        /**
         * dataList回调
         */
        const getDataList = (list: any[]) => {
            state.dataList = list;
        };

        /**
         * 用户账号选择事件
         */
        const change = (account: any): void => {
            state.tableRow = account;
        };
        /**
         * 用户账号双击事件
         */
        const dblClick = (account: any) => {
            confirm();
        };
        watch(
            () => props.modelValue,
            (val) => {
                if (utils.empty(val)) {
                    state.account = "";
                    // this.id = "";
                    state.tableRow = null;
                } else {
                    getAccount(val);
                }
            }
        );

        onMounted(() => {
            // 初始化
            if (!utils.empty(props.modelValue)) {
                getAccount(props.modelValue);
            }
        });
        return {
            UIAuth,
            bodySize,
            ...toRefs(state),
            confirm,
            clear,
            getDataList,
            change,
            dblClick,
        };
    },
});
</script>

<style scoped lang="scss">
</style>